<template>
  <div class="pad-20 bgc-default">
    <div class="pad-20 bg-color-white">
      <div>
        <el-dropdown class="btn" @command="handleCommand" trigger="click">
          <el-button type="primary">
            <span><i class="el-icon-plus font-12"></i>新建内容</span>
          </el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="1">图文</el-dropdown-item>
            <el-dropdown-item command="2">视频</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
      <!--顶部搜索 -->
      <div class="top-operate mar-t-20">
        <div class="search-item">
          <label>搜索内容：</label>
          <el-input @keyup.enter.native="handleSearch" v-model.trim="searchListQuery.contentName" class="width-300" placeholder="请输入搜索内容名称"></el-input>
          <label class="mar-l-20">状态：</label>
          <el-select v-model="searchListQuery.status" class="width-100">
            <el-option label="全部" value=''></el-option>
            <el-option label="启用" value='1'></el-option>
            <el-option label="禁用" value='0'></el-option>
          </el-select>
          <label class="mar-l-20">内容类型：</label>
          <el-select v-model="searchListQuery.contentType" class="width-100">
            <el-option label="全部" value=''></el-option>
            <el-option label="图文" value='1'></el-option>
            <el-option label="视频" value='2'></el-option>
          </el-select>
          <label class="mar-l-20">创建时间：</label>
          <el-date-picker
            v-model="datePicker"
            type="datetimerange"
            range-separator="至"
            value-format="yyyy-MM-dd HH:mm:ss"
            :default-time="['00:00:00', '23:59:59']"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
          <el-button-group class="mar-l-20">
            <el-button type="primary" @click="handleSearch">查询</el-button>
            <el-button plain @click="resetSearch">重置</el-button>
          </el-button-group>
        </div>
      </div>
      <!-- 内容列表 -->
      <div class="table-container">
        <el-table :data="dataList" v-loading="listLoading" element-loading-text="加载中" header-cell-class-name="default-header" row-class-name="default-row">
          <el-table-column min-width="380px" label="内容信息" fixed="left">
            <template slot-scope="scope">
              <div class="content-info cursor-p" @click="doEdit(scope.row)">
                <img :src="scope.row.coverUrl"/>
                <span class="suspend">{{ scope.row.contentType == 1 ? '图文' : '视频' }}</span>
                <div class="name line-2"><span :title="scope.row.contentName">{{ scope.row.contentName }}</span></div>
                <div class="access font-color-9">
                  <svg-icon icon-class="userAccess"/>
                  <span>{{ scope.row.accessCount }}次</span>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column min-width="300px" label="创建时间" prop="createTime" align="left">
          </el-table-column>
          <el-table-column min-width="250px" label="状态" prop="status" align="left">
            <template slot-scope="scope">
              {{ scope.row.status == 1 ? '启用' : '禁用' }}
            </template>
          </el-table-column>
          <el-table-column min-width="150px" label="操作" align="right" fixed="right">
            <template slot-scope="scope">
              <el-button type="text" size="medium" @click="doEdit(scope.row)">编辑</el-button>
              <el-button type="text" size="medium" v-if="scope.row.status == 0" @click="doUpdateStatus(scope.row, 1)">启用</el-button>
              <el-button type="text" size="medium" v-if="scope.row.status == 1" @click="doUpdateStatus(scope.row, 0)">禁用</el-button>
              <el-popconfirm title="您确定删除吗？" @onConfirm="doDelete(scope.row)">
                <el-button type="text" size="medium" slot="reference" class="mar-l-5">删除</el-button>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 列表分页 -->
      <div class="pagination">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="searchListQuery.currentPage"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="searchListQuery.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
  import { pagingContent, updateStatus, deleteContent } from '@/api/content/contentInfo'

  export default {
    data() {
      return {
        // 查询表单
        searchListQuery: {
          currentPage: 1,
          size: 10,
          enterpriseId: this.getEnterpriseId(),
          contentName: '',
          status: '',
          contentType: '',
          startDate: '',
          endDate: '',
          dateColumn: 'createTime'
        },
        total: null,
        listLoading: true,
        datePicker: [],
        dataList: []
      }
    },
    // 初始化页面
    created() {
      this.initList()
    },
    mounted() {
    },
    methods: {
      // 新建事件
      handleCommand(contentType) {
        this.$router.push({
          path: '/card/content-detail/index',
          query: { contentType: contentType }
        })
      },
      // 初始化
      initList(parameters) {
        this.listLoading = true
        const datePicker = this.datePicker
        if (this.$utils.isExist(datePicker) && datePicker.length > 0) {
          this.searchListQuery.startDate = datePicker[0]
          this.searchListQuery.endDate = datePicker[1]
        } else {
          this.searchListQuery.startDate = ''
          this.searchListQuery.endDate = ''
        }
        pagingContent(this.searchListQuery).then(response => {
          if (response.isError) return
          this.dataList = response.data.records
          this.total = response.data.total
          this.listLoading = false
        })
      },
      // 查询事件
      handleSearch() {
        this.searchListQuery.currentPage = 1
        this.initList()
      },
      // 重置事件
      resetSearch() {
        this.datePicker = []
        this.searchListQuery = {
          currentPage: 1,
          size: 10,
          enterpriseId: this.getEnterpriseId(),
          contentName: '',
          status: '',
          contentType: '',
          startDate: '',
          endDate: '',
          dateColumn: 'createTime'
        }
        this.initList()
      },
      // 编辑事件
      doEdit(row) {
        this.$router.push({
          path: '/card/content-detail/index',
          query: { contentInfoId: row.contentInfoId }
        })
      },
      // 启用/禁用事件
      doUpdateStatus(row, status) {
        this.listLoading = true
        updateStatus(row.contentInfoId, status).then(response => {
          if (response.isError) return
          this.$message({ type: 'success', message: '保存成功!' })
          this.initList()
        })
      },
      // 删除事件
      doDelete(row) {
        this.listLoading = true
        deleteContent(row.contentInfoId).then(response => {
          if (response.isError) return
          this.$message({ type: 'success', message: '删除成功!' })
          this.initList()
        })
      },
      // 更改当前页数
      handleCurrentChange(val) {
        this.searchListQuery.currentPage = val
        this.initList()
      },
      // 更改当前页面大小
      handleSizeChange(val) {
        this.searchListQuery.size = val
        this.initList()
      }
    }
  }
</script>

<style lang="less" scoped>
  .btn {
    button {
      padding: 10px 13px;
    }
  }
  .el-dropdown-menu--medium .el-dropdown-menu__item {
    padding: 0 32px;
  }
  // .el-table__fixed-right::before, .el-table__fixed::before {
  //   background-color: 
  // }
  .top-operate {
    margin-bottom: 20px;
    height: 85px;
    background-color: #f7f8fa;
    display: flex;
    align-items: center;
    white-space: nowrap;
    flex-wrap: nowrap;
    width: 100%;
    overflow-x: auto;
  }
  .search-item {
    flex-shrink: 0;
    padding: 0 20px;
    label {
      font-weight: unset;
    }
  }
  .content-info {
    img {
      height: 70px;
      width: 150px;
      float: left;
    }
    .suspend {
      position: absolute;
      left: 10px;
      background: black;
      color: white;
      padding: 0 6px;
      font-size: 12px;
    }
    .name {
      color: #409EFF;
      position: absolute;
      left: 168px;
      width: 180px;
    }
    .access {
      position: absolute;
      left: 168px;
      bottom: 7px;
      font-size: 14px;
    }
  }
</style>
